<template>
  <view>
    <uni-nav-bar dark left-icon="left" shadow background-color="#497bff" status-bar title="切换学员" @clickLeft="back1" />
    <view class="uni-list-cell">

    </view>
    <view style="margin-top: 10rpx;"><text style="color: blank;margin-left: 30rpx;">点击头像切换账号</text></view>




    <view class="task">
      <view class="invitation">
        <view class="item" style=" border-bottom: 1px solid #e2e2e2; padding-bottom: 25rpx;position: relative;   ">
          <text class="texts"
            style="margin-left: 30rpx;">全部学员({{vuex_studentArray.length}}/{{vuex_studentArray.length}})</text>
        </view>
        <scroll-view scroll-y style="height: 850rpx;">

          <view v-for="(item,index) in vuex_studentArray" @click="changeStudentArray(index)" class="item" :key="index"
            style=" border-bottom: 1px solid #e2e2e2;padding-bottom: 25rpx;position: relative;padding-top: 25rpx;"
            hover-stay-time="150" hover-class="u-cell-hover">

            <view class="icon">
              <image :src="CanvasPattern(index)">
            </view>

            <view class="cent">
              <text>{{item.name}}</text>
            </view>

            <u-avatar size=90 src="/static/iconfont/people-selected (1).png" mode="square" style="margin-right: 30rpx;"
              v-if="index==0"></u-avatar>
            <u-avatar size=80 src="/static/iconfont/changeUser.png" mode="square" style="margin-right: 37rpx;"
              v-else></u-avatar>

          </view>

        </scroll-view>
      </view>
    </view>





  </view>
</template>

<script>
  import moment from 'moment';
  moment.locale('zh-cn');
  export default {


    data() {
      return {
        show: false,
        message: '',
        studentList: '',
        current: 0,
        item: ''
      }
    },






    methods: {
      CanvasPattern(index) {
        return require('@/static/common/img/people' + index % 8 + '.png')

      },

      changeStudentArray(index) {
        const temp = this.vuex_studentArray[index];
        this.$set(this.vuex_studentArray, index, this.vuex_studentArray[0] );
         this.$set(this.vuex_studentArray, 0, temp );
        this.$u.vuex('vuex_studentArray', this.vuex_studentArray)
      },
      formatDate(dateStr) {
        const da = moment(dateStr);
        const formatted = da.format('YYYY年MM月DD日');
        const dayOfWeek = da.format('dddd');
        return `${formatted} ${dayOfWeek}`;
      },

      back1() {
        uni.navigateBack({
          delta: 1
        });
      },

      showmodal(item) {
        this.item = item
        this.show = true
      },
    },





  }
</script>

<style lang="scss">
  page {
    background-color: #F3F4F6;
    ;
  }

  .uni-list-cell {
    background-image: url('/static/common/img/read.png');
    width: 100%;
    height: 200rpx;
    flex-direction: column;
    background-size: 120% 280%;
    /* 或者使用 cover、100% 100% 等值 */
    background-position: center;
    padding: 6rpx 30rpx;
  }


  .task {
    position: fixed;
    width: 100%;
    height: 1000rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-top: 5rpx;
    padding: 40rpx 0 0 0rpx;
    display: flex;
    flex-direction: column;
    border-radius: 50rpx;

    .title {
      font-size: 32rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 44rpx;
    }

    .text {
      font-size: 24rpx;
      color: #999999;
      line-height: 34rpx;
      margin: 6rpx 0 22rpx 0;
    }

    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 74rpx;

      >view {
        width: 92rpx;
        height: 116rpx;
        background: linear-gradient(90deg, #A47EFF 0%, #8F64FB 100%);
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        >image {
          width: 58rpx;
          height: 56rpx;
        }

        >text {
          font-size: 20rpx;
          color: #FFFFFF;
          line-height: 28rpx;
          margin-top: 6rpx;
        }
      }
    }

    .invitation {
      .item {
        display: flex;
        align-items: center;
        /* 添加底部横线 */

        .icon {
          width: 84rpx;
          height: 84rpx;
          border-radius: 50%;
          display: flex;
          margin-left: 20rpx;
          justify-content: center;
          align-items: center;
          margin-right: 14rpx;

          >image {
            width: 84rpx;
            height: 84rpx;
          }
        }

        .cent {
          flex: 1;
          display: flex;
          flex-direction: column;

          >text:first-child {
            font-size: 28rpx;
            color: #000000;
            line-height: 40rpx;
          }

          >text:last-child {
            font-size: 32rpx;
            color: #000000;
            line-height: 34rpx;
          }
        }

        .complete {
          width: 120rpx;
          height: 55rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;

          border: 0.5rpx solid #e6e6e6;


          >text {
            font-size: 30rpx;
            font-weight: 600;
            line-height: 50rpx;
          }
        }

        .completes {
          width: 100rpx;
          height: 50rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;
          border: 0.5rpx solid #e6e6e6;
          color: #ffffff;
          line-height: 30upx;
          font-size: 20upx;
          top: 15upx;
          border-radius: 15upx;
          background-color: #FF6633;

          >text {
            font-size: 21rpx;
            line-height: 50rpx;
          }
        }
      }
    }
  }
</style>